<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" />
    <title>Episodes - PodGrab</title>

    <style>
        .container {
  max-width: 800px; }
.header {
  margin-top: 6rem;
  text-align: center; }
.value-prop {
  margin-top: 1rem; }
.value-props {
  margin-top: 4rem;
  margin-bottom: 4rem; }
.docs-header {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  font-weight: 600; }
.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin-bottom: 0;}
.value-img {
  display: block;
  text-align: center;
  margin: 2.5rem auto 0; }
.example-grid .column,
.example-grid .columns {
  background: #EEE;
  text-align: center;
  border-radius: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .1rem; }
.docs-example .row,
.docs-example.row,
.docs-example form {
  margin-bottom: 0; }
.docs-example h1,
.docs-example h2,
.docs-example h3,
.docs-example h4,
.docs-example h5,
.docs-example h6 {
  margin-bottom: 1rem; }
.heading-font-size {
  font-size: 1.2rem;
  color: #999;
  letter-spacing: normal; }
.code-example {
  margin-top: 1.5rem;
  margin-bottom: 0; }
.code-example-body {
  white-space: pre;
  word-wrap: break-word }
.example {
  position: relative;
  margin-top: 4rem; }
.example-header {
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: .5rem; }
.example-description {
  margin-bottom: 1.5rem; }
.example-screenshot-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
  height: 250px; }
.example-screenshot {
  width: 100%;
  height: auto; }
.example-screenshot.coming-soon {
  width: auto;
  position: absolute;
  background: #eee;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px; }
.navbar {
  display: none; }

/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 8rem;
    }
  .value-props {
    margin-top: 9rem;
    margin-bottom: 7rem; }
  .value-img {
    margin-bottom: 1rem; }
  .example-grid .column,
  .example-grid .columns {
    margin-bottom: 1.5rem; }
  .docs-section {
    padding: 6rem 0; }
  .example-send-yourself-copy {
    float: right;
    margin-top: 12px; }
  .example-screenshot-wrapper {
    position: absolute;
    width: 48%;
    height: 100%;
    left: 0;
    max-height: none; }
}

/* Larger than tablet */
@media (min-width: 750px) {

}
    </style>
</head>
<body>
    <div class="container">
        <section class="header">

    <h1>{{ .title }}</h1>
</section>
{{template "navbar"}}
<br>
{{$setting := .setting}}
{{range .podcast.PodcastItems}}
<div class="podcasts row">
    <div class="columns three">
        <img class="u-full-width" src="{{ .Image }}" alt="{{ .Title }}">
    </div>
    <div class="columns nine">
        <h4>{{.Title}}</h4>
        <small>{{ formatDate .PubDate }}</small>
        <p>{{ .Summary }}</p>

        {{if .DownloadPath}}
        <a class="button button-primary" href="{{ .DownloadPath }}" download>Download</a>
        {{else}}
        {{if not $setting.AutoDownload}}
        <a class="button button-primary" onclick="downloadToDisk('{{.ID}}')" download>Download to Disk</a>
        {{end}}
        {{end }}

    </div>
    <div class="columns one">

    </div>

</div>
<hr>
{{end}}
</div>
{{template "scripts"}}
<script>
function downloadToDisk(id){

    axios.get("/podcastitems/"+id+"/download")
    .then(function(response){
        Vue.toasted.show('Podcast download enqueued.' ,{
                    theme: "bubble",
                    position: "top-right",
                    type: "info",
                    duration : 5000
                });
        var row = document.getElementById('podcast-'+id);
        row.remove();
    })
    .catch(function(error){
      if (error.response && error.response.data && error.response.data.message) {


        Vue.toasted.show(error.response.data.message, {
            theme: "bubble",
            position: "top-right",
            type: "error",
            duration : 5000
        })
        }

    }).
    then(function(){
    })
      return false;
  }
    </script>
</body>
</html>
